angular.module("starter.directives", [])
    .directive('range', [
        '$timeout',
        function($timeout) {
            return {
                restrict: 'EA',
                scope: {
                    from: '=from',
                    to: '=to'
                },
                link: function($scope, $element, $attr) {
                    var width = document.getElementsByClassName('pro')[0].offsetWidth;
                    $scope.$watch('to', function(v) {
                        $timeout(function() {
                            if (v) {
                                $element[0].style.width = width * ($scope.to / $scope.from) + 'px';
                            }
                        }, 50);
                    });
                }
            };
        }
    ])


// 圆圈  指令  plan  计划   practice  实际完成 bid 鉴别
.directive("circle", ["$timeout",
    function($timeout) {
        return {
            restrict: "EA",
            scope: {
                plan: "=plan",
                practice: "=practice",
                bid: "@"
            },
            template: '<div style="text-align: center;"><canvas id="{{bid}}"></canvas></div>',
            link: function($scope, $element, $attrs) {
                $scope.progressbb = function() {

                    var b = ($scope.practice / $scope.plan).toFixed(2);
                    // b * 100
                    //  统计图画圆
                    var circle = document.getElementById($scope.bid);
                    circle.width = 70;
                    circle.height = 70;
                    var circleContext = circle.getContext("2d");
                    circleContext.beginPath();


                    circleContext.strokeStyle = "#EDEDED";
                    circleContext.lineWidth = 5;
                    circleContext.arc(35, 35, 30, 0, Math.PI * 2);

                    circleContext.font = "bold 15px Arial";
                    circleContext.textAlign = "center";
                    circleContext.fillStyle = "#EDEDED";
                    circleContext.stroke();

                    circleContext.beginPath();

                    circleContext.strokeStyle = "#f39998";
                    circleContext.lineWidth = 5;
                    circleContext.arc(35, 35, 30, 0, Math.PI * 2 * b);

                    circleContext.font = "bold 15px Arial";
                    circleContext.textAlign = "center";
                    circleContext.fillStyle = "#000000";
                    circleContext.font = "14px Arial";
                    circleContext.fillText(parseInt(b * 100) + "%", 35, 40);
                    // circleContext.font = "11px Arial";
                    // circleContext.fillStyle = "#A9A8A8";
                    // circleContext.fillText("达成率", 37, 50);
                    circleContext.stroke();
                };

                $scope.$watch('plan', function(a, b) {
                    if (a) {
                        $scope.progressbb();
                    }
                });
                $scope.$watch('practice', function(a, b) {
                    if (a) {
                        $scope.progressbb();
                    }
                });

            }
        };
    }
])

// 时间  左右滚动
.directive('time', [
    function() {
        return {
            restrict: 'EA',
            scope: {
                times: '=times',
                month: '=month',
                onFun: '&'
            },
            template: '<div class="time-select"><button class="button button-icon icon ion-arrow-left-b" ng-disabled="month <= 0" ng-click="leftClick()"></button><span>{{times[month].year}}年{{times[month].month}}月</span><button class="button button-icon icon ion-arrow-right-b" ng-disabled="month >= (times.length - 1)" ng-click="rightClick()"></button></div>',
            link: function($scope, $element, $attr) {

                $scope.leftClick = function() {
                    if ($scope.month > 0) {
                        $scope.month--;
                        $scope.onFun({ month: $scope.month, type: 1 });
                    }
                };

                $scope.rightClick = function() {
                    if ($scope.month < $scope.times.length - 1) {
                        $scope.month++;
                        $scope.onFun({ month: $scope.month, type: 1 });
                    }
                };
                $scope.$watch('month', function(a, b) {
                    if (a) {
                        $scope.onFun({ month: $scope.month, type: 1 });
                    }
                });
            }
        };
    }
]);
